<script setup lang='ts'>
import { reactive } from 'vue';

// reactive注解

// reactive 根据对象初始值自动推导当前数据类型
const user = reactive({
  username: '',
  password: ''
})
user.username = "123"

// 可选参数无法推导 -- 需要自己定义
type User = {
  username: string,
  password: string,
  isAgree?: boolean
}

const users: User = reactive({
  username: "",
  password: "",
  isAgree: true
})

users.username = "123"

// 练习
// type UserInfo = {
//   username: string,
//   address: string,
//   phone: string,
//   gender?: '男'|'女'
// }

interface UserInfo {
  username: string,
  address: string,
  phone: string,
  gender?: '男'|'女'
}

const userinfo: UserInfo = {
  username: "小明",
  address: '广州',
  phone: '13234345454'
}
userinfo.gender = "男"

</script>
<template>
<div>
  hello vue
</div>
</template>
<style scoped>
</style>